<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
    <link rel="icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon">
    <!-- 采用html , css , js 分开写的原则
    这里属于自己写的 css 部分 -->
    <link rel="stylesheet" href="/css/General style.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/slideshow.css">
    <link rel="stylesheet" href="/css/home-hero.css">
    <link rel="stylesheet" href="/css/home-main.css">
    <link rel="stylesheet" href="/css/footer.css">
    <!-- 根据窗口大小动态的改变工具栏的样式，以及大小 -->
    <link rel="stylesheet" href="/css/subbar.css" media="all and (max-width:1499.99999px)">   <!-- 媒体查询1 -->
    <link rel="stylesheet" href="/css/subbar2.css" media="all and (min-width:1500px)">  <!-- 媒体查询2 -->
</head>

<body>
<!-- 采用html , css , js 分开写的原则
    这里属于自己写的 html 部分 -->
<!-- 头部 -->
<div class="header">
    <div class="site-topbar">
        <div class="container w clearfix">
            <!-- 头部导航 -->
            <div class="topbar-nav fl">
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">IoT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#"> 天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">企业团购</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="#" id="j-app" class="topbar-download">
                    下载app
                    <div class="appcode">
                        <img src="images/download.png" alt="小米商城" width="90" height="90">
                        小米商城app
                    </div>
                </a>
                <span>|</span>
                <a href="#">智能生活</a>
                <span>|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="site-shop fr">
<!--                <li class="header_right_li"><a th:href="@{'/shop_cart?username=' + ${username}}"><i class="fa fa-shopping-cart"></i>&nbsp; 购物车</a>-->
                <a th:href="@{'/shop_cart?username=' + ${username}}" class="cart">
                    <em class="iconfont">&#xe61c;</em>购物车
                    <span class="J-sp"></span>
                </a>
<!--                <div class="j-menu">-->
<!--                    购物车中还没有商品，赶紧选购吧！-->
<!--                </div>-->
            </div>
            <!--                <div class="topbar-info fr">-->
            <!--                    <a href="./login">登录</a>-->
            <!--                    <span>|</span>-->
            <!--                    <a href="./register">注册</a>-->
            <!--                    <span>|</span>-->
            <!--                    <span class="site-info-span">-->
            <!--                        <a href="#">消息通知</a>-->
            <!--                    </span>-->
            <!--                </div>-->
            <div class="topbar-info fr">
                <th:block th:if="${username != null}">
                    <a th:text="${username}"></a>
                </th:block>
                <th:block th:unless="${username != null}">
                    <a href="./login">登录</a>
                    <span>|</span>
                    <a href="./register">注册</a>
                </th:block>
    </span>
            </div>
        </div>
    </div>
<!--    <div class="site-header">-->
<!--        <div class="container w clearfix">-->
<!--            &lt;!&ndash; logo &ndash;&gt;-->
<!--            <div class="head-logo fl">-->
<!--                <a href="#" class="logo text">-->
<!--                    小米官网-->
<!--                </a>-->
<!--            </div>-->
<!--            &lt;!&ndash; nav &ndash;&gt;-->
<!--            <div class="header-nav fl">-->
<!--                <ul class="nav-list">-->
<!--                    <li class="nav-category">-->
<!--                        <a href="#" id="header-title" class="header-title">全部商品分类</a>-->
<!--                        <div class="site-category">-->
<!--                            <ul class="cat-ul">-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        手机 电话卡-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    &lt;!&ndash; js &ndash;&gt;-->
<!--                                    <div class="commodity clearfix">-->
<!--                                        &lt;!&ndash; 使用Thymeleaf循环来生成重复的商品项 &ndash;&gt;-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li" th:each="i: ${#numbers.sequence(1, 6)}">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/01-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米 11</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li" th:each="i: ${#numbers.sequence(1, 6)}">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/01-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米 11</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li" th:each="i: ${#numbers.sequence(1, 6)}">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/01-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米 11</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li" th:each="i: ${#numbers.sequence(1, 6)}">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/01-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米 11</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        电视 盒子-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    &lt;!&ndash; js &ndash;&gt;-->
<!--                                    <div class="commodity clearfix">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/02-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小米透明电视</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        笔记本 显示器-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/03-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi G 游戏本</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        家电 插线板-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/04-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">冰箱</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        出行 穿戴-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/05-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">Redmi 手表</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        智能 路由器-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/06-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">打印机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        电源 配件-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-2">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/07-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">移动电源</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        健康 儿童-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/08-1.jpg" alt="" width="40" height="40">-->
<!--                                                    <span class="text">洗手机</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        耳机 音箱-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/09-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小爱音箱 Art 电池版</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                                <li class="category-list">-->
<!--                                    <a href="#" class="cat-title">-->
<!--                                        生活 箱包-->
<!--                                        <em class="cat-icon iconfont">&#xe638;</em>-->
<!--                                    </a>-->
<!--                                    <div class="commodity clearfix comm-3">-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                        <ul class="com-ul">-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                            <li class="com-li">-->
<!--                                                <a href="#" class="link clearfix">-->
<!--                                                    <img src="images/10-1.webp" alt="" width="40" height="40">-->
<!--                                                    <span class="text">小背包</span>-->
<!--                                                </a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">小米手机</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/1-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/1-02.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/1-03.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/1-04.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/1-05.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">Redmi 红米</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/2-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/2-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/2-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/2-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/2-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/2-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">电视</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/3-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/3-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/3-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/3-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/3-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/3-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">笔记本</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/4-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/4-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/4-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/4-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/4-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/4-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">家电</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/5-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/5-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/5-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/5-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/5-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/5-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">路由器</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/6-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/6-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/6-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/6-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/6-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/6-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li class="nav-item">-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">智能硬件</span>-->
<!--                        </a>-->
<!--                        &lt;!&ndash; nav - js &ndash;&gt;-->
<!--                        <div class="header-nav-menu">-->
<!--                            <div class="container w">-->
<!--                                <ul>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure figure-none">-->
<!--                                                <img src="images/7-01.webp" alt="小米11" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米11</div>-->
<!--                                            <p>3999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/7-01.webp" alt="小米10至尊纪念版" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10至尊纪念版</div>-->
<!--                                            <p>5299元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/7-01.webp" alt="小米10" width="160" height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10</div>-->
<!--                                            <p>3399元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <em></em>-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/7-01.webp" alt="小米10 青春版 5G" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米10 青春版 5G</div>-->
<!--                                            <p>1999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                    <li class="menu-nav">-->
<!--                                        <a href="#">-->
<!--                                            <div class="figure">-->
<!--                                                <img src="images/7-01.webp" alt="小米MIX Alpha" width="160"-->
<!--                                                     height="110">-->
<!--                                            </div>-->
<!--                                            <div class="title">小米MIX Alpha</div>-->
<!--                                            <p>19999元起</p>-->
<!--                                        </a>-->
<!--                                    </li>-->
<!--                                </ul>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">服务</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#" class="link">-->
<!--                            <span class="text">社区</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            &lt;!&ndash; 搜索框 &ndash;&gt;-->
<!--            <div class="header-search fr">-->
<!--                <form action="" method="GET" class="search-form">-->
<!--                    <input type="text" class="search-text" placeholder="小米11">-->
<!--                    <input type="submit" class="search-btn iconfont" value="&#xe652;">-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>
<!-- home 首页导航-->
<!--<div class="home-hero w">-->
<!--    &lt;!&ndash; 轮播图 &ndash;&gt;-->
<!--    <div class="slideshow">-->
<!--        <ul class="sli-ul">-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/05.jpg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/02.jpeg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/03.jpg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/04.jpeg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/01.jpg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--            <li>-->
<!--                <a href="#">-->
<!--                    <img src="./images/img/05.jpg" alt="">-->
<!--                </a>-->
<!--            </li>-->
<!--        </ul>-->
<!--        <div class="sli-box">-->
<!--            <a href="javaScript:;"></a>-->
<!--            <a href="javaScript:;"></a>-->
<!--            <a href="javaScript:;"></a>-->
<!--            <a href="javaScript:;"></a>-->
<!--            <a href="javaScript:;"></a>-->
<!--        </div>-->
<!--        <div class="left"></div>-->
<!--        <div class="right"></div>-->
<!--    </div>-->
<!--    &lt;!&ndash; sub 下&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="home-sub clearfix">&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="sub-l fl">&ndash;&gt;-->
<!--    &lt;!&ndash;                <ul class="l-list clearfix">&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-01.png" alt=""> 小米秒杀&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-02.png" alt=""> 企业团购&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-03.png" alt=""> F码通道&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-04.png" alt=""> 米粉卡&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-05.png" alt=""> 以旧换新&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/h-06.png" alt=""> 话费充值&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                </ul>&ndash;&gt;-->
<!--    &lt;!&ndash;            </div>&ndash;&gt;-->
<!--    &lt;!&ndash;            <div class="sub-r fl">&ndash;&gt;-->
<!--    &lt;!&ndash;                <ul class="r-list clearfix">&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li class="first">&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/r-01.jpg" alt="">&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/r-02.jpg" alt="">&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                    <li>&ndash;&gt;-->
<!--    &lt;!&ndash;                        <a href="#">&ndash;&gt;-->
<!--    &lt;!&ndash;                            <img src="images/r-03.jpg" alt="">&ndash;&gt;-->
<!--    &lt;!&ndash;                        </a>&ndash;&gt;-->
<!--    &lt;!&ndash;                    </li>&ndash;&gt;-->
<!--    &lt;!&ndash;                </ul>&ndash;&gt;-->
<!--    &lt;!&ndash;            </div>&ndash;&gt;-->
<!--    &lt;!&ndash;        </div>&ndash;&gt;-->
<!--</div>-->
<!-- home-main首页主体 -->
<div class="home-main">
    <div class="container w">
        <!-- 小米秒杀 -->
        <!--            <div class="home-flashsale">-->
        <!--                <div class="box-hd">-->
        <!--                    <h2 class="title">小米秒杀</h2>-->
        <!--                </div>-->
        <!--                <div class="box-bd">-->
        <!--                    <div class="row clearfix">-->
        <!--                        <div class="flashsale-countdown fl">-->
        <!--                            <div class="round">-->
        <!--                                14:00 场-->
        <!--                            </div>-->
        <!--                            <img src="images/lightning" alt="">-->
        <!--                            <div class="desc">-->
        <!--                                距离结束还有-->
        <!--                            </div>-->
        <!--                            <div class="countdown clearfix">-->
        <!--                                <span></span>-->
        <!--                                <i>:</i>-->
        <!--                                <span></span>-->
        <!--                                <i>:</i>-->
        <!--                                <span></span>-->
        <!--                                <i></i>-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="flashsale-list fl">-->
        <!--                            <ul class="swiper-wrapper">-->
        <!--                                &lt;!&ndash; 1 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-1">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-01.webp" alt="小米全面屏电视E32C 灰色 32英寸" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">小米全面屏电视E32C 灰色 32英寸</h3>-->
        <!--                                            <p class="desc">全面屏设计，人工智能系统</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>799</span>元-->
        <!--                                                <del>999元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 2 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-2">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-02.webp" alt="米家天然乳胶护颈枕S 灰色" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家天然乳胶护颈枕S 灰色</h3>-->
        <!--                                            <p class="desc">大颗粒释压体验，升级好睡眠</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>189</span>元-->
        <!--                                                <del>249元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 3 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-3">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-03.webp" alt="Pro 15增强版 i5" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">Pro 15增强版 i5</h3>-->
        <!--                                            <p class="desc">再次突破强大</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>4999</span>元-->
        <!--                                                <del>5899元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 4 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-4">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-04.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 5 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-5">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-05.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 6 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-6">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-06.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 7 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-7">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-07.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 8 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-8">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-08.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 9 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-9">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-09.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 10 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-10">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-10.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 11 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-11">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-11.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 12 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-12">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-12.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                                &lt;!&ndash; 13 &ndash;&gt;-->
        <!--                                <li class="swiper-slide rainbow-item-13">-->
        <!--                                    <a href="#">-->
        <!--                                        <div class="conter">-->
        <!--                                            <div class="thumb">-->
        <!--                                                <img src="images/com-06.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">-->
        <!--                                            </div>-->
        <!--                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>-->
        <!--                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>-->
        <!--                                            <p class="price">-->
        <!--                                                <span>1249</span>元-->
        <!--                                                <del>1499元</del>-->
        <!--                                            </p>-->
        <!--                                        </div>-->
        <!--                                    </a>-->
        <!--                                </li>-->
        <!--                            </ul>-->
        <!--                        </div>-->
        <!--                        <div class="swiper-controls">-->
        <!--                            <span class="swiper-flashsale-prev">-->
        <!--                                <i class="iconfont btn-left">&#xe603;</i>-->
        <!--                            </span>-->
        <!--                            <span class="swiper-flashsale-next">-->
        <!--                                <i class="iconfont btn-right">&#xe638;</i>-->
        <!--                            </span>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!-- 广告图 -->
        <!--            <div class="home-banner-box">-->
        <!--                <a href="#">-->
        <!--                    <img src="images/bann-01.webp" alt="note 9" width="1226px" height="120">-->
        <!--                </a>-->
        <!--            </div>-->
        <!-- 手机 -->
        <div class="home-mobile-box">
            <!-- 上 -->
            <div class="box-hd">
                <h2 class="title">手机</h2>
                <div class="more">
                    <a href="#" class="more-link">
                        查看全部<i class="iconfont iconfont-arrow-right-big">&#xe638;</i>
                    </a>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="mobile-left fl">
                        <ul class="mobile-left-list">
                            <li class="brick-item brick-item-l">
                                <a href="#">
                                    <img src="images/sj-001.webp" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="mobile-right fl">
                        <ul class="brick-list clearfix">
                            <!-- 使用 Thymeleaf 动态生成列表项 -->
                            <li th:each="phone : ${phoneList}" class="brick-item brick-item-m brick-item-m-2">
                                <a th:href="@{/shop/buy/detail(username=${username}, product_id=${phone.id})}">
                                    <div class="figure figure-img">
                                        <img th:src="@{${phone.img}}" th:alt="${phone.name}">
                                    </div>
                                    <h3 class="title" th:text="${phone.name}"></h3>
                                    <p class="desc" th:text="${phone.info}"></p>
                                    <p class="price">
                                        <span class="num" th:text="${phone.price}">3999</span>元
                                        <span>起</span>
                                    </p>
                                </a>
                            </li>
                        </ul>
                        <!--                            <ul class="brick-list clearfix">-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-01.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">小米11</h3>-->
                        <!--                                        <p class="desc">骁龙888 | 2K四曲面屏</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">3999</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                            </ul>-->
                        <!--                            <ul class="brick-list clearfix">-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-01.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">小米11</h3>-->
                        <!--                                        <p class="desc">骁龙888 | 2K四曲面屏</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">3999</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-02.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">Note 9 Pro</h3>-->
                        <!--                                        <p class="desc">一亿像素夜景相机，120Hz六档变速高刷屏</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1599</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-03.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">Note 9</h3>-->
                        <!--                                        <p class="desc">天玑 800U处理器，5000mAh电池，</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1299</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-04.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">Note 9 4G</h3>-->
                        <!--                                        <p class="desc">6000mAh长续航</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">999</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-05.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">小米10 至尊版</h3>-->
                        <!--                                        <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1599</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-06.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">Redmi K30S 至尊纪念版 </h3>-->
                        <!--                                        <p class="desc">144Hz[7档]变速高刷屏</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1599</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-07.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">Redmi K30 至尊版 </h3>-->
                        <!--                                        <p class="desc">120Hz弹出全面屏，天玑1000+旗舰处理器</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1599</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                                <li class="brick-item brick-item-m brick-item-m-2">-->
                        <!--                                    <a href="#">-->
                        <!--                                        <div class="figure figure-img">-->
                        <!--                                            <img src="images/sj-08.webp" alt="">-->
                        <!--                                        </div>-->
                        <!--                                        <h3 class="title">腾讯黑鲨3s</h3>-->
                        <!--                                        <p class="desc">骁龙865处理器，120Hz刷新率</p>-->
                        <!--                                        <p class="price">-->
                        <!--                                            <span class="num">1599</span>元-->
                        <!--                                            <span>起</span>-->
                        <!--                                        </p>-->
                        <!--                                    </a>-->
                        <!--                                </li>-->
                        <!--                            </ul>-->
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-02.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 家电 -->
        <div class="home-appliances-box">
            <!-- 上 -->
            <div class="box-hd clearfix">
                <h2 class="title fl">家电</h2>
                <div class="more">
                    <ul class="tab-list clearfix">
                        <li>热门</li>
                        <li>电视影音</li>
                    </ul>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="appliances-left fl">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/app-01.webp" alt=""></a>
                            </li>
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/app-02.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="appliances-right fl">
                        <div>
                            <ul class="brick-list clearfix">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-1.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-2.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-3.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-4.jpg" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-8.webp" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>热门</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-10.webp" alt="">
                                        </div>
                                        <h3 class="title">全面屏电视E43K</h3>
                                        <p class="desc">全面屏设计，海量内容</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-11.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-3.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-4.jpg" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-8.webp" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>电视影音</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-03.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 智能 -->
        <div class="home-appliances-box home-ability-box">
            <!-- 上 -->
            <div class="box-hd clearfix">
                <h2 class="title fl">智能</h2>
                <div class="more">
                    <ul class="tab-list clearfix">
                        <li>热门</li>
                        <li>安防</li>
                        <li>出行</li>
                    </ul>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="appliances-left fl">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/ai-1.webp" alt=""></a>
                            </li>
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/ai-2.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="appliances-right fl">
                        <div>
                            <ul class="brick-list clearfix">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-01.webp" alt="">
                                        </div>
                                        <h3 class="title">小米小爱音箱 Play</h3>
                                        <p class="desc">听音乐、语音遥控家电</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-02.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-03.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-4.jpg" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-08.webp" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>热门</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-09.webp" alt="">
                                        </div>
                                        <h3 class="title">米家智能门锁 标准锁体 碳素黑</h3>
                                        <p class="desc">一体化活体指纹识别，多种开锁方式</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-10.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-12.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-13.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>安防</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-001.jpg" alt="">
                                        </div>
                                        <h3 class="title">小米小爱音箱 Play</h3>
                                        <p class="desc">听音乐、语音遥控家电</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-003.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-004.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-4.jpg" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/ai-0008.webp" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>出行</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-04.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 搭配 -->
        <div class="home-appliances-box home-match-box">
            <!-- 上 -->
            <div class="box-hd clearfix">
                <h2 class="title fl">搭配</h2>
                <div class="more">
                    <ul class="tab-list clearfix">
                        <li>热门</li>
                        <li>耳机音箱</li>
                    </ul>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="appliances-left fl">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/dp-1.webp" alt=""></a>
                            </li>
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/dp-2.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="appliances-right fl">
                        <div>
                            <ul class="brick-list clearfix">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-01.webp" alt="">
                                        </div>
                                        <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                        <p class="desc"> 主动降噪/持久续航/无线充</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-02.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-03.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-04.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>热门</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-001.webp" alt="">
                                        </div>
                                        <h3 class="title">全面屏电视E43K</h3>
                                        <p class="desc">全面屏设计，海量内容</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-002.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-003.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-004.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米AI音箱</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>耳机音箱</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-05.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 配件 -->
        <div class="home-appliances-box home-mountings-box">
            <!-- 上 -->
            <div class="box-hd clearfix">
                <h2 class="title fl">配件</h2>
                <div class="more">
                    <ul class="tab-list clearfix">
                        <li>热门</li>
                        <li>充电器</li>
                    </ul>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="appliances-left fl">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/pj-1.webp" alt=""></a>
                            </li>
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/pj-2.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="appliances-right fl">
                        <div>
                            <ul class="brick-list clearfix">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-01.webp" alt="">
                                        </div>
                                        <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                        <p class="desc"> 主动降噪/持久续航/无线充</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-02.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-03.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-04.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>热门</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-001.webp" alt="">
                                        </div>
                                        <h3 class="title">全面屏电视E43K</h3>
                                        <p class="desc">全面屏设计，海量内容</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-002.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-003.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-004.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米AI音箱</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>耳机音箱</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-06.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 周边 -->
        <div class="home-appliances-box home-rim-box">
            <!-- 上 -->
            <div class="box-hd clearfix">
                <h2 class="title fl">周边</h2>
                <div class="more">
                    <ul class="tab-list clearfix">
                        <li>热门</li>
                        <li>出行</li>
                    </ul>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <div class="appliances-left fl">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/zb-1.webp" alt=""></a>
                            </li>
                            <li class="brick-item  brick-item-m">
                                <a href="#"><img src="images/zb-2.webp" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="appliances-right fl">
                        <div>
                            <ul class="brick-list clearfix">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-01.webp" alt="">
                                        </div>
                                        <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                        <p class="desc"> 主动降噪/持久续航/无线充</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-02.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-03.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-04.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>热门</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="brick-list clearfix hide">
                                <!-- 1 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-001.webp" alt="">
                                        </div>
                                        <h3 class="title">全面屏电视E43K</h3>
                                        <p class="desc">全面屏设计，海量内容</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-002.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-003.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-004.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-5.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-6.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/app-7.webp" alt="">
                                        </div>
                                        <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                        <p class="desc">全面屏设计</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="brick-item brick-item-s">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80"
                                                 height="80">
                                        </div>
                                        <h3 class="title">小米AI音箱</h3>
                                        <p class="price"><span class="num">2099</span>元</p>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="brick-item brick-item-s">
                                    <a href="">
                                        <div class="figure figure-more">
                                            <i class="iconfont">&#xe83b;</i>
                                        </div>
                                        <div class="more">
                                            浏览更多
                                            <small>耳机音箱</small>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告图 -->
        <div class="home-banner-box">
            <a href="#">
                <img src="images/bann-07.webp" alt="note 9" width="1226px" height="120">
            </a>
        </div>
        <!-- 视频 -->
        <div class="home-mobile-box home-video-box">
            <!-- 上 -->
            <div class="box-hd">
                <h2 class="title">视频</h2>
                <div class="more">
                    <a href="#" class="more-link">
                        查看全部<i class="iconfont iconfont-arrow-right-big">&#xe638;</i>
                    </a>
                </div>
            </div>
            <!-- 下 -->
            <div class="box-bd clearfix">
                <ul class="video-list clearfix">
                    <li class="video-item">
                        <a href="#">
                            <div class="figure figure-img">
                                <img src="images/v-01.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296"
                                     height="180">
                                <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                            </div>
                            <h3 class="title">Redmi 10X系列发布会</h3>
                            <p class="desc">Redmi 10X系列发布会</p>
                        </a>
                    </li>
                    <li class="video-item">
                        <a href="#">
                            <div class="figure figure-img">
                                <img src="images/v-02.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296"
                                     height="180">
                                <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                            </div>
                            <h3 class="title">小米10 青春版 发布会</h3>
                        </a>
                    </li>
                    <li class="video-item">
                        <a href="#">
                            <div class="figure figure-img">
                                <img src="images/v-03.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296"
                                     height="180">
                                <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                            </div>
                            <h3 class="title">小米10 8k手机拍大片</h3>
                        </a>
                    </li>
                    <li class="video-item">
                        <a href="#">
                            <div class="figure figure-img">
                                <img src="images/v-04.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296"
                                     height="180">
                                <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                            </div>
                            <h3 class="title">小米10发布会</h3>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="footer-box">
    <div class="site-footer clearfix">
        <div class="w">
            <!-- 服务部分 -->
            <div class="footer-service">
                <ul class="list-service clearfix">
                    <li><a href="#"><em class="iconfont">&#xe629;</em>预约维修服务</a></li>
                    <li><a href="#"><em class="iconfont">&#xe61f;</em>7天无理由退货</a></li>
                    <li><a href="#"><em class="iconfont iconfont-circle-15">&#xe606;</em>15天免费换货</a></li>
                    <li><a href="#"><em class="iconfont">&#xe633;</em>满99元包邮</a></li>
                    <li><a href="#"><em class="iconfont">&#xe632;</em>520余家售后网点</a></li>
                </ul>
            </div>
            <!-- 友情链接 -->
            <div class="footer-links">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd><a href="#">账户管理</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">订单操作</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">自助服务</a></dd>
                    <dd><a href="#">相关下载</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd><a href="#">小米之家</a></dd>
                    <dd><a href="#">服务网点</a></dd>
                    <dd><a href="#">授权体验店</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd><a href="#">了解小米</a></dd>
                    <dd><a href="#">加入小米</a></dd>
                    <dd><a href="#">投资者关系</a></dd>
                    <dd><a href="#">企业社会责任</a></dd>
                    <dd><a href="#">廉洁举报</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd><a href="#">新狼微博</a></dd>
                    <dd><a href="#">官方微信</a></dd>
                    <dd><a href="#">联系我们</a></dd>
                    <dd><a href="#">公益基金会</a></dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd><a href="#">F 码通道</a></dd>
                    <dd><a href="#">礼物码</a></dd>
                    <dd><a href="#">防伪查证</a></dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#" class="btn-small">
                        <em class="iconfont">&#xe604;</em> 人工客服
                    </a>
                    <div class="follow">
                        关注小米
                        <a href="#" class="wb"></a>
                        <a href="#" class="wx" id="J_followWx"></a>
                        <img src="images/wx-img.png" alt="" id="J_followWxImg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="site-info">
        <div class="w container clearfix">
            <div class="logo ir">小米官网</div>
            <div class="info-text">
                <p class="sites">
                    <a href="#">小米商城</a>
                    <span>|</span>
                    <a href="#">MIUI</a>
                    <span>|</span>
                    <a href="#"> 米家</a>
                    <span>|</span>
                    <a href="#">米聊</a>
                    <span>|</span>
                    <a href="#">多看</a>
                    <span>|</span>
                    <a href="#">游戏</a>
                    <span>|</span>
                    <a href="#">政企服务</a>
                    <span>|</span>
                    <a href="#">小米天猫店</a>
                    <span>|</span>
                    <a href="#">小米集团隐私政策</a>
                    <span>|</span>
                    <a href="#">小米公司儿童信息保护规则</a>
                    <span>|</span>
                    <a href="#">小米商城隐私政策</a>
                    <span>|</span>
                    <a href="#">小米商城用户协议</a>
                    <span>|</span>
                    <a href="#">问题反馈</a>
                    <span>|</span>
                    <a href="#">Select Location</a>
                </p>
                <p class="sites">
                    <a href="#">北京互联网法院法律服务工作站</a>
                    <span>|</span>
                    <a href="#">中国消费者协会</a>
                    <span>|</span>
                    <a href="#">北京市消费者协会</a>
                </p>
                <p>
                    ©
                    <a href="#">mi.com</a> 京ICP证110507号
                    <a href="#">京ICP备10046444号</a>
                    <a href="#">京公网安备11010802020134号</a>
                    <a href="#">京网文[2020]0276-042号</a>
                    <br>
                    <a href="#">（京）网械平台备字（2018）第00005号</a>
                    <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                    <a href="#">营业执照</a>
                    <a href="#">医疗器械质量公告</a>
                    <br>
                    <a href="#">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048
                    <a href="#">食品经营许可证</a>
                    <br> 违法和不良信息举报电话：171-5104-4404
                    <a href="#">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
            </div>
            <div class="info-links">
                <a href="#"><img src="images/truste.png" alt=""></a>
                <a href="#"><img src="images/v-logo-1.png" alt=""></a>
                <a href="#"><img src="images/v-logo-2.png" alt=""></a>
                <a href="#"><img src="images/fx.png" alt=""></a>
                <a href="#" class="safe-auth  J_safeAuth"><img src="images/js-1.png" alt="" class="img1"><img
                        src="images/js-2.png" alt="" class="img2"></a>
            </div>
        </div>
        <div class="slogan">
            <a href="tencent://message/?Menu=yes&uin=2748826916&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">让全球每个人都能享受科技带来的美好生活</a>
        </div>
    </div>
</div>
<!-- 工具条 -->
<div class="home-tool-bar">
    <a href="#" class="item">
        <div class="icon">
            <img src="images/tool-1.png" alt="" class="static"><img src="images/tool-01.png" alt="" class="hover">
        </div>
        <span class="text">手机APP</span>
        <div class="pop-content">
            <img src="images/APP.png" alt="">
            <span class="desc">
                    扫码领取新人百元礼包
                </span>
        </div>
    </a>
    <a href="#" class="item">
        <div class="icon">
            <img src="images/tool-2.png" alt="" class="static"><img src="images/tool-02.png" alt="" class="hover">
        </div>
        <span class="text">个人中心</span>
    </a>
    <a href="#" class="item">
        <div class="icon">
            <img src="images/tool-3.png" alt="" class="static"><img src="images/tool-03.png" alt="" class="hover">
        </div>
        <span class="text">售后服务</span>
    </a>
    <a href="#" class="item">
        <div class="icon"><img src="images/tool-4.png" alt="" class="static"><img src="images/tool-04.png" alt=""
                                                                                  class="hover"></div>
        <span class="text">人工客服</span>
    </a>
    <a href="./cart.html" class="item">
        <div class="icon"><img src="images/tool-5.png" alt="" class="static"><img src="images/tool-05.png" alt=""
                                                                                  class="hover"></div>
        <span class="text">购物车</span>
    </a>
    <a href="#" class="item backtop" id="J_atop">
        <div class="icon">
            <img src="images/totop.png" alt="" class="static"><img src="images/totop_hover.png" alt="" class="hover">
        </div>
        <span class="text">回顶部</span>
    </a>
</div>
</body>

<!-- 采用html , css , js 分开写的原则
这里属于自己写的 js 部分 -->
<!-- 主页 -->
<script src="js/index.js"></script>
<!-- 轮播图 -->
<script src="js/slideshow.js "></script>
<!-- 轮播图动画 -->
<script src="js/move.js "></script>
<!-- 移动 -->
<script src="js/roll.js "></script>
<!-- 列表 -->
<script src="js/tab.js"></script>
<!-- 逻辑上合理 使js html css 代码进行分离 这样可以改变数据得类型 -->

</html>